<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #_title{
            font-size: 35px;
            font-weight: bold;
            margin-left: 50px;
            margin-top: 10px;
            float: left;
        }
        .el-divider{
            width: 100%;
        }
        #_comment{
            width: 100%;
            height: 45px;
        }
        #_reply{
            width: 80%;
        }
        .image {
            width: 100%;
            display: block;
        }
        .float-div{
            width: 230px;
            height: 230px;
            float: right;
            margin-right: 10px;
        }
        #_lisiDiv{
            height: 800px;
        }
        #_introduction{
            font-size: 10px;
            width: 550px;
            margin-top: 10px;
        }
        #_rate{
            float:top;
            margin-top: 70px;
            margin-left: 50px;
        }
        #_paging1{
            margin-top: 10px;
            margin-left: 44%;

        }
        #_paging2{
            margin-top: 10px;
            margin-left: 36%;
        }
        #_commentList{
            height: 800px;
        }

    </style>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
  <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>
<body>
<div id="app">
    <el-row :span="24" border>
        <el-col :span="16" border>

            <el-card :body-style="{ padding: '0px' }">
                <div id="_lisiDiv">
                    <span>&emsp;</span><br>
                    <div id="_title">
                    <span th:text="${shop.name}"></span><br>
                    </div>

                    <div class="float-div">
                        <img th:src="${shop.imgSrc}"
                             class="image">
                    </div>
                    <div id="_rate">
                        <el-rate
                                v-model="value"
                                disabled
                                show-score
                                text-color="#ff9900"
                                score-template="{value}">
                        </el-rate>
                    </div>
                    <div style="width: 50%;">
                        <el-divider></el-divider>
                    </div>
                    <div id="_introduction">
                        <span th:text="${shop.detail}">

                        </span>
                    </div>

                    <div style="margin-top: 1px;">
                        <el-divider content-position="right">商品列表</el-divider>
                    </div>
                    <el-table
                            :data="productList"
                            stripe
                            style="width: 100%;">
                        <el-table-column
                                prop="name"
                                label="名称"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                label="图片"
                                width="150">
                            <template slot-scope="scope">
                                <el-image :src="scope.row.imgSrc" style="width: 50px;height: 50px"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="价格"
                                width="100">
                            <template slot-scope="scope">
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.price }}元</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="detail"
                                label="描述">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="加购"
                                width="100">
                            <template slot-scope="scope">
                            <el-button type="text" size="medium" @click.prevent="addToCart(scope.row.id)">
                                <i class="el-icon-s-goods">加购</i>
                            </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div id="_paging1">
                        <el-button-group>
                            <el-button  icon="el-icon-arrow-left" @click.prevent="goToNext(go)"></el-button>
                            <el-button><i class="el-icon-arrow-right el-icon--right" @click.prevent="goToNext(back)"></i></el-button>
                        </el-button-group>
                    </div>

                </div>
            </el-card>
        </el-col>

        <el-col :span="8">
            <el-card :body-style="{ padding: '0px' }">
                <div id="_commentList">
                    <div style="height: 180px" v-for="comment in commentList">
                        <div style="padding: 14px;">
                            <span>用户<span v-text="comment.userId"></span>评论：</span><br>
                            <div id="_comment">
                                <span v-text="comment.comments">很好吃，味道不错</span><br>
                            </div>

                            <div id="_reply">
                            <span><span>商家回复：</span>
                                <el-input
                                        v-if="!comment.reply"
                                        placeholder="等待回复..."
                                        :disabled="true"></el-input>
                                <el-input
                                        v-if="comment.reply"
                                        placeholder="等待回复..."
                                        v-text="comment.reply"
                                        :disabled="true"></el-input>
                            </span></div>
                        </div>
                        <div style="width: 100%;">
                            <el-divider></el-divider>
                        </div>
                    </div>
                    <div id="_paging2">
                        <el-button-group>
                            <el-button  icon="el-icon-arrow-left" @click.prevent="goToFront(go)"></el-button>
                            <el-button><i class="el-icon-arrow-right el-icon--right" @click.prevent="goToFront(back)"></i></el-button>
                        </el-button-group>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>

</div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                go:0,
                back:1,
                shopId:[[${shop.id}]],
                currentPage1:1,
                currentPage2:1,
                pageSize1:4,
                pageSize2:5,
                productPage:'',
                commentPage:'',
                commentList:[],
                productList:[],
                value:'',

            },
            computed: {
            },
            methods: {
                addToCart(productId){
                    $.post("/cartitem/addToCart",{productId:productId},function (data) {
                        if (data ==="ok"){
                            alert("加购成功")
                        }
                    })
                }
                ,
                goToNext(index){
                    console.log(index)
                    let _this = this;
                    if ( index === 0 &&_this.currentPage2 === 1){
                        return false;
                    }
                    if(index === 1 &&_this.currentPage2 === _this.productPage){
                        return false;
                    }
                    let param = {};
                    if (index === 1){
                        param ={
                            shopId: _this.shopId,
                            currentPage:_this.currentPage2+1,
                            pageSize:_this.pageSize2
                        }
                    }else {
                        param ={
                            shopId: _this.shopId,
                            currentPage:_this.currentPage2-1,
                            pageSize:_this.pageSize2
                        }
                    }
                    $.post("/product/getProductDetails",param,function (data) {
                        _this.currentPage2=data.current;
                        _this.pageSize2=data.size;
                        _this.productList = data.records;
                        _this.productPage = data.pages;


                    })

                }
                ,
                goToFront(index){
                    console.log(index)
                    let _this = this;
                    if ( index === 0 &&_this.currentPage1 === 1){
                        return false;
                    }
                    if(index === 1 &&_this.currentPage1 === _this.productPage){
                        return false;
                    }
                    let param = {};
                    if (index === 1){
                        param ={
                            shopId: _this.shopId,
                            currentPage:_this.currentPage1+1,
                            pageSize:_this.pageSize1
                        }
                    }else {
                        param ={
                            shopId: _this.shopId,
                            currentPage:_this.currentPage1-1,
                            pageSize:_this.pageSize1
                        }
                    }
                    $.post("/comment/commentInfo",param,function (data) {
                        _this.currentPage1=data.current;
                        _this.pageSize1=data.size;
                        _this.commentList = data.records;
                        _this.commentPage = data.pages;


                    })
                }
                ,
                initShopList() {
                    let _this=this;
                    $.post("/comment/grade",{shopId:_this.shopId},function (data) {
                        _this.value=data;
                        console.log(data);
                    })
                }
                ,
                initComment(){
                    let _this = this;
                    let param ={
                        shopId: _this.shopId,
                        currentPage:_this.currentPage1,
                        pageSize:_this.pageSize1,
                    }
                    $.post("/comment/commentInfo",param,function (data) {
                        _this.currentPage1=data.current;
                        _this.pageSize1=data.size;
                        _this.commentList = data.records;
                    })

                }
                ,
                initProduct(){
                    let _this = this;
                    let param ={
                        shopId: _this.shopId,
                        currentPage:_this.currentPage2,
                        pageSize:_this.pageSize2,
                    }
                    $.post("/product/getProductDetails",param,function (data) {
                        _this.currentPage2=data.current;
                        _this.pageSize2=data.size;
                        _this.productList = data.records;
                        _this.productPage = data.pages;
                        console.log(data)

                    })

                }
            }
            ,
            created(){
                this.initShopList();
                this.initComment();
                this.initProduct();
            }
        });
    </script>






</body>
</html>